<template>
  <div class="flex">
    <tool-tag-select class="inline-block" :filter-tags="tags" @change="handleTagSelectChange"></tool-tag-select>
    <q-field class="inline-block" filled dense v-if="tags.length > 0">
      <template v-slot:control>
        <tool-tag-chip v-for="tag in tags" :key="tag._id || tag.id" :tag="tag"
                       removable @remove="handleCloseTag(tag)">
        </tool-tag-chip>
      </template>
    </q-field>
  </div>
</template>

<script>
import ToolTagChip from 'src/components/tag/ToolTagChip.vue'
import ToolTagSelect from 'src/components/tag/ToolTagSelect.vue'

export default {
  name: 'ToolTagChipGroup',
  components: {
    ToolTagChip,
    ToolTagSelect
  },
  props: {
    modelValue: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      tags: this.modelValue
    }
  },
  watch: {
    modelValue (modelValue) {
      this.tags = modelValue
    }
  },
  methods: {
    handleCloseTag (tag) {
      this.tags = this.tags.filter(e => e._id !== tag._id)
      this.$emit('update:modelValue', this.tags)
    },
    handleTagSelectChange (selectTag) {
      this.tags = [
        ...this.tags,
        selectTag
      ]
      this.$emit('update:modelValue', this.tags)
    }
  }
}
</script>

<style scoped>

</style>
